
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Header />
      </el-header>
    </el-container>
    <el-container>
      <el-aside width="200px">
        <Sidebar />
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>
  
  <script>
import Sidebar from "@/components/Sidebar.vue";
import Header from "@/components/Header.vue";

export default {
  components: {
    Sidebar,
    Header,
  },
};
</script>


  
  <style>
/* Container.vue 或其父级样式 */
.container {
  display: flex;
  height: 100vh; /* 或其他合适的高度 */
}

.sidebar {
  flex-basis: 200px; /* 侧边栏宽度 */
  flex-shrink: 0; /* 防止侧边栏缩小 */
  overflow-y: auto; /* 添加滚动条，防止内容溢出 */
}
</style>
  